<template>
	<view>
		<u-card>
			<view class="" slot="body">
				<view class="u-body-header " v-if="showUser">
					<u-row customStyle="margin-bottom: 5px">
						<u-col span="2" @click="onClick('user')">
							<u-avatar :src="user.avatar" size="72"></u-avatar>
						</u-col>
						<u-col span=" 10" @click="onClick('user')">
							<view style="font-size: 32rpx;">{{user.username}}</view>
							<view style="font-size: 24rpx;color: #919191;display: flex;
		align-items: center;">{{getTime(post.date)}}</view>
						</u-col>
					</u-row>
				</view>
				<view v-else class="note">
					<view class="date" @click="onClick('content')">
						{{getTime(post.date)}}
					</view>
					<view class="setting" v-if="showSetting" @click="set = true">
						<u-icon name="more-dot-fill" size="50" color="#9a9a9a">
						</u-icon>
					</view>
					<u-action-sheet :actions="sets" :show="set" :closeOnClickOverlay="true" round="20"
						@select="clickSet" cancelText="取消" @close="set = false">
					</u-action-sheet>
				</view>
				<view class="u-body-item">
					<view class="u-body-item-title u-line-1" @click="onClick('content')">{{post.title}}</view>
					<view class="u-body-item-content u-line-2" @click="onClick('content')">{{post.text}}</view>
					<image v-if="images.length > 0" :src="images[0]" mode="aspectFill" @click="preview"></image>
				</view>

			</view>
			<view class="u-foot u-border-bottom" slot="foot">
				<u-icon class="icon" name="eye" size="60" color="" :label="post.views" customStyle="margin-left:20px"
					@click="onClick('view')"></u-icon>
				<u-icon class="icon" name="chat" size="60" color="" :label="post.comments"
					customStyle="margin-left:20px" @click="onClick('comment')"></u-icon>
				<u-icon v-if="!isLiked" class="icon" name="thumb-up" size="60" color="" :label="post.likes"
					@click="onClick('like')" customStyle="margin-left:20px"></u-icon>
				<u-icon v-if="isLiked" class="icon" name="thumb-up-fill" size="60" color="#82B7D7" :label="post.likes"
					@click="onClick('unlike')" customStyle="margin-left:20px"></u-icon>
			</view>
		</u-card>
	</view>
</template>

<script>
	export default {
		name: "single-post",
		emits: ["onClick", "clickSetting", "updateLikes"],
		props: {
			index: {
				type: Number,
				default: 0
			},
			isLiked: {
				type: Boolean,
				default: false
			},
			showUser: {
				type: Boolean,
				default: false
			},

			user: {
				type: Object,
				default: null
			},
			post: {
				type: Object,
				default: null
			},
			showSetting: {
				type: Boolean,
				default: false
			},
			sets: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		data() {
			return {
				images: [],
				set: false,
			};
		},
		mounted() {
			this.isLike();
		},
		methods: {
			onClick(type) {
				this.$emit("onClick", type, this.index)
			},
			clickSet(e) {
				this.$emit("clickSetting", e)
			},
			getTime(stamp) {
				let date = new Date(stamp)
				let month = date.getMonth() + 1
				let day = date.getDate()
				return month + "月" + day + "日"
			},
			preview() {
				uni.previewImage({
					current: 0,
					urls: this.images,
					indicator: 'number'
				})
			},
			isLike() {
				this.$request.TokenRequest({
					url: "/post/isLiked"
				}, {
					pid: this.post.pid,
					uid: this.$store.state.user.uid,
				}).then(res => {
					if (res.state === 200) {
						let data = {
							index: this.index,
							isLiked: res.data.isLike == 1 ? true : false
						}
						this.$emit("updateLikes", data)
					}
				})
			},
		},
		created() {
			this.images = JSON.parse(this.post.image)
		}
	}
</script>

<style scoped lang="scss">
	.u-body-header {
		font-size: 20rpx;
		color: #333;
		padding: 20rpx 0;
		width: 90%;
		margin: 0 auto;

	}

	.note {
		width: 90%;
		margin: 0 auto;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		color: #9a9a9a;
	}

	.date {
		font-size: 44rpx;
		width: 70%;
		// font-weight: bold;

	}

	.setting {
		position: absolute;
		right: 5%;
	}

	.u-body-item {
		padding: 20rpx 0;
	}

	.u-body-item-title {
		font-size: 44rpx;
		font-weight: bold;
		color: #333;
		width: 90%;
		margin: 0 auto;
		margin-bottom: 10px;
	}

	.u-body-item-content {
		max-width: 90%;
		// overflow-y: hidden;
		// text-overflow: ellipsis;
		// white-space: nowrap;
		font-size: 32rpx;
		color: #9a9a9a;
		width: 90%;
		margin: 0 auto;
		margin-bottom: 10px;
	}

	.u-body-item image {
		width: 90%;
		flex: 0 0 120rpx;
		height: 400rpx;
		border-radius: 8rpx;
		margin-left: 5%;
		margin-bottom: 10px;
	}

	.u-foot {
		padding-bottom: 10px;
		display: flex;
		justify-content: center;

		.icon {
			margin: 0 60rpx;
		}
	}
</style>
